<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dropdownMenu</title>
<link href="dropdown_menu.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<style>
#dropdownMenu li ul ul {
	margin-left: 100px;
}
</style>
<![endif]-->
<script src="mootools.js"></script>
<script type="text/javascript">

	Element.extend(
	{
		hide: function() 
		{
			return this.setStyle('display', 'none');
		},
		
		show: function() 
		{
			return this.setStyle('display', '');
		}
	});

	var DropdownMenu = new Class({	
		initialize: function(element)
		{
			$A($(element).childNodes).each(function(el)
			{
				if(el.nodeName.toLowerCase() == 'li')
				{
					$A($(el).childNodes).each(function(el2)
					{
						if(el2.nodeName.toLowerCase() == 'ul')
						{
							$(el2).hide();
							
							el.addEvent('mouseover', function()
							{
								el2.show();
								return false;
							});
	
							el.addEvent('mouseout', function()
							{
								el2.hide();
							});
							new DropdownMenu(el2);
						}
					});
				}
			});
			return this;
		}
	});
	
	Window.onDomReady(function() {new DropdownMenu($('dropdownMenu'))});
	
</script>
</head>

<body>
<h1>Mouseover the menu elements</h1>

<br/>
<br/>

<ul id="dropdownMenu">

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a>

				<ul>
					<li><a href="#">Echeneis</a></li>

					<li><a href="#">Phtheirichthys</a></li>
					<li><a href="#">Remora</a></li>
					<li><a href="#">Remorina</a></li>
					<li><a href="#">Rhombochirus</a></li>
				</ul>
			</li>
			<li><a href="#">Tilefishes</a>

				<ul>
					<li><a href="#">Caulolatilus</a></li>
					<li><a href="#">Lopholatilus</a></li>
					<li><a href="#">Malacanthus</a></li>
				</ul>
			</li>
			<li><a href="#">Bluefishes</a>

				<ul>
					<li><a href="#">Pomatomus</a></li>
					<li><a href="#">Scombrops</a></li>
					<li><a href="#">Sphyraenops</a></li>
				</ul>
			</li>
			<li><a href="#">Tigerfishes</a>

				<ul>
					<li><a href="#">Amniataba</a></li>
					<li><a href="#">Bidyanus</a></li>
					<li><a href="#">Hannia</a></li>

					<li><a href="#">Hephaestus</a></li>
					<li><a href="#">Lagusia</a></li>

					<li><a href="#">Leiopotherapon</a></li>
					<li><a href="#">Mesopristes</a></li>
					<li><a href="#">Pelates</a></li>
					<li><a href="#">Pelsartia</a></li>

					<li><a href="#">Pingalla</a></li>
					<li><a href="#">Rhyncopelates</a></li>

					<li><a href="#">Scortum</a></li>
					<li><a href="#">Syncomistes</a></li>
					<li><a href="#">Terapon</a></li>
				</ul>

			</li>

		</ul>

	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a>
				<ul>

					<li><a href="#">Anabas</a></li>

					<li><a href="#">Ctenopoma</a></li>
				</ul>
			</li>
			<li><a href="#">Labyrinthfishes</a>
				<ul>
					<li><a href="#">Belontia</a></li>

					<li><a href="#">Betta</a></li>

					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Pseudosphromenus</a></li>

					<li><a href="#">Sphaerichthys</a></li>

					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>

			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>

	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>

			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>

			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>

</ul>

</body>
</html>
